<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
div {
  /* 定位类型 */
  position: fixed;
}

.menu {
  width: 195px;
  height: 22px;
  /* 内边距 */
  padding-left: 22px;
  padding-right: 131px;
  padding-top: 3px;
  /* 元素的垂直对齐方式 */
  vertical-align: bottom;
  /* 背景图片 */
  background-image: url("bg1.gif");
}

a {
  /* 下划线类型 */
  text-decoration: none
}

td {
  padding-left: 18px;
}
</style>
</head>
<body>
  <div>
    <a class="menu" id="menu1" href="#" onclick="menu1(event)">菜单1</a>
    <a class="menu" id="menu2" href="#" onclick="menu2(event)">菜单2</a>
    <div id="div1" style="visibility: hidden;">
      <table style="border: 1px solid; width: 195px;">
        <tr>
          <td><a href="#" onclick="reduce()">菜单项A</a></td>
        </tr>
        <tr>
          <td><a href="#" onclick="reduce()">菜单项B</a></td>
        </tr>
        <tr>
          <td><a href="#" onclick="reduce()">菜单项C</a></td>
        </tr>
      </table>
    </div>
  </div>
</body>
<script>
  var obj = document.getElementById('div1').style;
  // 将id为div1的元素置于菜单1的下方
  function menu1(event) {
    // 以当前路径作为相对路径，构造一个以bg1.gif为目标的url
    document.getElementById("menu2").style.backgroundImage = "url('bg1.gif')";
    // 将事件发生的目标样式的背景图片属性更改为指定值
    event.target.style.backgroundImage = "url('bg2.gif')";
    // 设置#div1左内边距为0，将内部表格展示在#menu1的下方
    obj.paddingLeft = "0";
    // 可见性
    obj.visibility = "visible";
  }
  // 将id为div1的元素置于菜单2的下方
  function menu2(event) {
    document.getElementById("menu1").style.backgroundImage = "url('bg1.gif')";
    event.target.style.backgroundImage = "url('bg2.gif')";
    // 设置#div1左内边距为200，将内部表格展示在#menu2的下方
    obj.paddingLeft = "200px";
    obj.visibility = "visible";
  }
  // 隐藏id为div1的元素并还原class为menu的元素的背景图片
  function reduce() {
    obj.visibility = "hidden";
    var arr = document.getElementsByClassName("menu");
    for (var i = 0; i < arr.length; i++)
      arr[i].style.backgroundImage = "url('bg1.gif')";
  }
</script>
</html>